/**
 * 物流 tip 模块
 *
 */
+function($, win, doc, undefined) {
    "use strict";

    var pluginName = 'tip';
    var defaults = {
            content:'文本内容', // 文本内容
            align:'top', // 三角形的位置 top || bottom || right
            openFn:null,
            closeFn:null
        };
    var $box = $('<div><div class="tip-box">' +
                    '<span class="icon-arrow">' +
                        '<i class="icon-arrow-bg"></i>' +
                        '<i class="icon-arrow-border"></i>' +
                    '</span>' +
                    '<div class="item-list-box"></div>' +
                '</div></div>');
    var timer = null;

    function Plugin(element, options) {
        this.element = element;
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    };

    $.extend(Plugin.prototype, {
        init: function() {
            var that = this;
            var $el = $(this.element);
            $el.on({
                'mouseenter':function(){
                    that.open();
                },
                'mouseleave':function(){
                    that.autoClose();
                }
            });
            that.leaveClose();
        },
        setPos:function(el,box){
            var that = this;
            var $el = $(el);
            var $box = $(box);
            var el_t = $el.offset().top;
            var el_l = $el.offset().left;
            var el_w = $el.outerWidth();
            var el_h = $el.outerHeight();
            var box_w = $box.outerWidth();
            var box_h = $box.outerHeight();
            var align = that.settings.align;
            var result = {'position':'absolute'};

            if(align == 'top'){
                result.top = el_t + el_h;
                result.left = el_l - box_w/2 + el_w/2;
            }

            if(align == 'right'){
                result.top = el_t - box_h/2+el_h/2;
                result.left = el_l - box_w;
            }

            if(align == 'bottom'){
                result.top = el_t - box_h;
                result.left = el_l - box_w/2 + el_w/2;
            }

            return result;          
        }, 
        open: function() {
            var $body = $(doc.body);
            var that = this;
            var el = this.element;
            var settings = that.settings;

            timer && clearTimeout(timer);
            if(typeof settings.openFn == 'function'){
                settings.openFn(el);
            }
            $box.find('.tip-box').addClass('tip-box-'+settings.align).find('.item-list-box').html(settings.content);
            $box.appendTo($body).hide();
            $box.css(that.setPos(this.element,$box)).show();
        },
        close: function() {
            var that = this;
            var settings = that.settings;
            timer && clearTimeout(timer);
            $.isFunction(settings.closeFn) && settings.closeFn(); 
            $box.hide();
        },
        autoClose:function(){
            var that = this;
            timer && clearTimeout(timer);
            timer = setTimeout(function(){
                that.close();
            },1000);
        },
		leaveClose:function() {
            var that = this;
			//先解绑再绑定，不然会形成事件链
            $box.off('mouseenter mouseleave').on({
                'mouseenter':function(){
                    timer && clearTimeout(timer);
                },
                'mouseleave':function(){
                    that.close();
                }
            });
		}
    });

    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
        });
    };

}(jQuery, window, document);


$(function(){
    // $('[data-tip]').tip({
    //     align:'top',
    //     content:'中午了你',
    //     openfn:function(ele){
    //         this.content = '<div class="item-list-hd"> <label class="tit">宅急送：</label> <span class="number">a000403647833</span> </div> <ul class="item-list-bd"> <li class="item-list cur"> <p class="site">到达 [虎门基地]</p> <p class="datetime">2017-06-28 00:13:33</p> </li> <li class="item-list"> <p class="site">离开 [浙江_杭州运转中心] 发往 [虎门基地]</p> <p class="datetime">2017-06-27 00:48:44</p> </li> <li class="item-list"> <p class="site">以上为最新跟踪信息 <a href="###">查看全部</a></p> </li> </ul> ';
    //     } 
    // });
});
